<template>
  <div class="order_list_box">
    <div>
      <el-date-picker
          v-model="time"
          type="daterange"
          unlink-panels
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
      <el-select style="margin: 0 20px;width: 228px" v-model="status" placeholder="订单状态">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-input style="width: 228px;margin-right: 18px" v-model="order_number" placeholder="订单号"></el-input>
      <el-button @click="GetOrderList" style="background: #B11E24;border-color: #B11E24" type="primary"><i class="el-icon-search"></i>搜索
      </el-button>
    </div>
    <div class="order_list">
      <div class="order_head">
        <div class="time_one">订单号</div>
        <div class="time_one">下单时间</div>
        <div class="time_one">预期交货期</div>
        <div class="product">产品</div>
        <div class="price_one">订单价格</div>
        <div class="price_one">折后价格</div>
        <div class="order_status">订单状态</div>
        <div class="details">详情</div>
      </div>
      <div>
        <div class="order_head body_content" v-for="(item,index) in orderList" :key="index">
          <div class="time_one">{{item.order_number}}</div>
          <div class="time_one">{{item.create_time}}</div>
          <div class="time_one">{{item.delivery_time}}</div>
          <div class="product">{{item.first_goods_name}}</div>
          <div class="price_one">{{item.old_price}}</div>
          <div class="price_one">{{item.price}}</div>
          <div class="order_status">{{item.status_info}}</div>
          <div class="details" @click="goDetails(item.id)">
            <div>查看详情</div>
          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="limit"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getOrderList} from "@/api/apis";

export default {
  name: "orderList",
  data() {
    return {
      options: [
        {
          value: '1',
          label: '待确认'
        }, {
          value: '2',
          label: '待付款'
        }, {
          value: '3',
          label: '待发货'
        }, {
          value: '4',
          label: '待收货'
        }, {
          value: '5',
          label: '已完成'
        }
      ],
      status: '',
      time: '',
      order_number: '',
      currentPage: 1,
      limit: 10,
      total: 0,
      orderList:[],
    }
  },
  methods: {
    goDetails(e){
      this.$router.push({name:'orderInfo',query:{id:e}})
    },
    handleCurrentChange(e){
      this.currentPage = e
      this.GetOrderList()
    },
    GetOrderList() {
      let data = {
        status: this.status,
        time: this.time,
        order_number: this.order_number,
        page: this.currentPage,
        limit: this.limit
      }
      getOrderList(data).then(res => {
        this.orderList = res.data.data
        this.total = res.data.total
      })
    }
  },
  mounted() {
    this.GetOrderList()
  }
}
</script>

<style scoped lang="less">
.order_list_box {
  .order_list {
    margin-top: 30px;

    .order_head {
      display: flex;
      align-items: center;
      height: 36px;
      background: #000000;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;

      .time_one {
        width: 180px;
      }

      .product {
        width: 280px;
      }

      .price_one {
        width: 160px;
      }

      .order_status {
        width: 100px;
      }

      .details {
        width: 140px;
      }
    }

    .body_content{
      height: 48px;
      border-bottom: 1px solid #C7C7C7;
      background: #FFFFFF;
      color: #000000;
      .product{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .details{
        div{
          width: 80px;
          margin: 0 auto;
          height: 28px;
          border: 1px solid #000000;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 28px;
          color: #000000;
          text-align: center;
          box-sizing: border-box;
        }
        div:hover{
          border-color: #B11E24;
          background: #B11E24;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
